<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="utf-8" />
    <title>Personal Information</title>
    <script src="static/jquery.min.js"></script>
    <script src="static/personalInfo.js"></script>
    <style>
        body{
            font-family:'微软雅黑';
            font-size: 12px;
        }
        .person-info-div{
            width: 30%;
            height: 30px;
            position: relative;
            padding: 20px;
        }
        .info-desc{
            position: absolute;
            height: 30px;
            line-height: 30px;
            width: 20%;
            text-align: right;
        }
        .info{
            position: relative;
            float: right;
            width: 70%;
        }
        .info-input{
            width: 80%;
            background-color: rgb(255, 255, 255);
            border-width: medium medium 1px;
            border-style: none none solid;
            border-color: -moz-use-text-color -moz-use-text-color gray;
            height: 30px;
            line-height: 30px;
        }
        .info-input-readonly{
            width: 80%;
            background-color: rgb(255, 255, 255);
            border-width: medium medium 1px;
            border-style: none none solid;
            border-color: -moz-use-text-color -moz-use-text-color gray;
            height: 30px;
            line-height: 30px;
            color: gray;
        }
        .info-btn-div{
            padding: 20px;
            border-top: 1px solid gray;
            width: 30%;
            margin-left: 50px;
            margin-top: 20px;
            height: 100px;
        }
        .info-btn-div2{
            width: 88px;
            height: 36px;
            border: 10px;
            color: #fff;
            text-align: center;
            line-height: 36px;
            border-radius: 2px;
            font-size: 14px;
            float: left;
            margin-left: 50px;
            cursor: pointer;
        }
    </style>

</head>
<body>
    <div class="person-info">
        <div>
            <div class="person-info-div">
                <label class="info-desc">用户编号</label>
                <div class="info">
                    <input type="text" id="userId" name="userId" class="info-input-readonly" readonly="readonly"/>
                </div>
            </div>
            <div class="person-info-div">
                <label class="info-desc">用户名</label>
                <div class="info">
                    <input type="text" id="username" name="username" class="info-input"/>
                </div>
            </div>
            <div class="person-info-div">
                <label class="info-desc">组织名</label>
                <div class="info">
                    <input type="text" id="organizationId" name="organizationId" class="info-input-readonly" readonly="readonly"/>
                </div>
            </div>
            <div class="person-info-div">
                <label class="info-desc">密码</label>
                <div class="info">
                    <input type="password" id="hashedPassword" name="hashedPassword" class="info-input-readonly" readonly="readonly"/>
                </div>
            </div>
            <div class="person-info-div">
                <label class="info-desc">状态</label>
                <div class="info">
                    <input type="text" id="status" name="status" class="info-input-readonly" readonly="readonly"/>
                </div>
            </div>
            <div class="person-info-div">
                <label class="info-desc">来源</label>
                <div class="info">
                    <input type="text" id="source" name="source" class="info-input-readonly" readonly="readonly"/>
                </div>
            </div>
            <div class="person-info-div">
                <label class="info-desc">邮箱地址</label>
                <div class="info">
                    <input type="text" id="emailAddress" name="emailAddress" class="info-input"/>
                </div>
            </div>
            <div class="person-info-div">
                <label class="info-desc">是否被锁</label>
                <div class="info">
                    <input type="text" id="locked" name="locked" class="info-input-readonly" readonly="readonly"/>
                </div>
            </div>
            <div class="person-info-div">
                <label class="info-desc">自定义信息</label>
                <div class="info">
                    <textarea  id="additionInfo"  class="info-text"></textarea>
                </div>
            </div>
        </div>

        <div class="info-btn-div" >
            <div id="submit-btn" class="info-btn-div2" style="background-color:rgb(0, 188, 212);" onclick="updateUserInfo()">
                <span>保存</span>
            </div>
            <div id="cancel-btn" class="info-btn-div2" style="background-color:rgb(255, 64, 129);">
                <span>取消</span>
            </div>
        </div>
    </div>
</body>
</html>
